describe('点餐系统-全界面兼容性测试', () => {
  // 请根据您前端服务的实际端口修改
  const frontendUrl = 'http://localhost:8081';

  // 定义需要测试的视口
  const viewports = [
    { device: '桌面端', size: [1920, 1080] },
    { device: '移动端 (iPhone X)', size: 'iphone-x' }
  ];

  // 定义需要测试的页面
  const pages = [
    { name: '首页', path: '/index' },
    { name: '商家列表', path: '/businessList' },
    { name: '商家信息', path: '/businessInfo' },
    { name: '登录', path: '/login' },
    { name: '注册', path: '/register' },
    { name: '订单确认', path: '/orders' },
    { name: '我的订单列表', path: '/orderList' },
    { name: '支付页面', path: '/payment' },
    { name: '我的收货地址', path: '/userAddress' },
    { name: '新增收货地址', path: '/addUserAddress' },
    { name: '编辑收货地址', path: '/editUserAddress' }
  ];

  // 动态生成测试用例
  pages.forEach(page => {
    context(`${page.name}页面`, () => {
      viewports.forEach(viewport => {
        it(`在 ${viewport.device} 上应能正确显示`, () => {
          // 设置视口
          if (Array.isArray(viewport.size)) {
            cy.viewport(viewport.size[0], viewport.size[1]);
          } else {
            cy.viewport(viewport.size);
          }
          
          // 访问页面
          cy.visit(`${frontendUrl}${page.path}`);
          
          // 通用断言：检查页面主要区域是否存在且可见
          // 对于Vue <router-view>，通常其内部的第一个div是主要容器
          cy.get('.wrapper').should('be.visible');
          
          // 您可以在此处为特定页面添加更具体的断言
          // 例如：
          if (page.name === '登录') {
            cy.get('input[placeholder="手机号码"]').should('be.visible');
            cy.get('input[placeholder="密码"]').should('be.visible');
            cy.get('button').contains('登陆').should('be.visible');
          }
        });
      });
    });
  });
}); 